import {
    Divider,
    ColorPicker,
    Radio,
    InputNumber,
    Select,
    Tag
} from 'antd'

import { themeStore } from '../Config/zustand'
import { FontFamilyMapping, FontWeightMapping, FontStyleMapping, IsHiddenMapping, BorderTypeMapping } from '../Config/theme'

const SetSystemTABS = () => {

    const { body, updateBody } = themeStore()
    const { tabsMax, tabsIsAll, tabsIconColor, tabsRadio, tabsBack, tabsActive, tabsBorderColor, tabsBorderType } = body
    const { fontColor, fontFamily, fontWeight, fontStyle, fontSize, fontShadowX, fontShadowY, fontShadowS, fontShadowB } = body
    const { iconState, iconSize, iconIndex, iconShadowX, iconShadowY, iconShadowS, iconShadowB } = body

    const BodyFunc = (key, value) => {
        body[key] = value
        updateBody(body)
    }

    return (
        <div className='SetSystemTABS'>
            <Divider orientation="left" >切换标签</Divider>
            <div className='Content'>
                <div>
                    <div className='title'>操作设置</div>
                    <div className='Label' >
                        <div>最大数量</div>
                        <InputNumber value={tabsMax} onChange={e => BodyFunc('tabsMax', e)} />
                    </div>
                    <div className='Label' >
                        <div>全部按钮</div>
                        <Radio.Group value={tabsIsAll} buttonStyle="solid" onChange={e => BodyFunc('tabsIsAll', e.target.value)}>
                            {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                        </Radio.Group>
                    </div>
                    <div className='Label'>
                        <div>图标颜色</div>
                        <ColorPicker value={tabsIconColor} onChangeComplete={e => BodyFunc('tabsIconColor', e.toHexString())} />
                    </div>
                    <div className='Label' >
                        <div>圆角尺寸</div>
                        <InputNumber value={tabsRadio} onChange={e => BodyFunc('tabsRadio', e)} />
                    </div>
                    <div className='Label'>
                        <div>默认背景</div>
                        <ColorPicker value={tabsBack} onChangeComplete={e => BodyFunc('tabsBack', e.toHexString())} />
                    </div>
                    <div className='Label'>
                        <div>选中背景</div>
                        <ColorPicker value={tabsActive} onChangeComplete={e => BodyFunc('tabsActive', e.toHexString())} />
                    </div>
                    <div className='Label'>
                        <div>边框颜色</div>
                        <ColorPicker value={tabsBorderColor} onChangeComplete={e => BodyFunc('tabsBorderColor', e.toHexString())} />
                    </div>
                    <div className='Label' >
                        <div>边框类型</div>
                        <Radio.Group value={tabsBorderType} buttonStyle="solid" onChange={e => BodyFunc('tabsBorderType', e.target.value)}>
                            {BorderTypeMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                        </Radio.Group>
                    </div>
                </div>
                <div>
                    <div className='title'>标签文字</div>
                    <div className='Label'>
                        <div>默认颜色</div>
                        <ColorPicker value={fontColor} onChangeComplete={e => BodyFunc('fontColor', e.toHexString())} />
                    </div>
                    <div className='Label'>
                        <div>文字字体</div>
                        <Select value={fontFamily} options={FontFamilyMapping} onChange={e => BodyFunc('fontFamily', e)} />
                    </div>
                    <div className='Label'>
                        <div>文字加粗</div>
                        <Select value={fontWeight} options={FontWeightMapping} onChange={e => BodyFunc('fontWeight', e)} />
                    </div>
                    <div className='Label'>
                        <div>文字倾斜</div>
                        <Select value={fontStyle} options={FontStyleMapping} onChange={e => BodyFunc('fontStyle', e)} />
                    </div>
                    <div className='Label' >
                        <div>文字字号</div>
                        <InputNumber value={fontSize} onChange={e => BodyFunc('fontSize', e)} />
                    </div>
                </div>
                <div>
                    <div className='title'>标签图标</div>
                    <div className='Label' >
                        <div>是否显示</div>
                        <Radio.Group value={iconState} buttonStyle="solid" onChange={e => BodyFunc('iconState', e.target.value)}>
                            {IsHiddenMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                        </Radio.Group>
                    </div>
                    <div className='Label' >
                        <div>图标尺寸</div>
                        <InputNumber value={iconSize} onChange={e => BodyFunc('iconSize', e)} />
                    </div>
                    <div className='Label' >
                        <div>图标间距</div>
                        <InputNumber value={iconIndex} onChange={e => BodyFunc('iconIndex', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影X轴</div>
                        <InputNumber value={iconShadowX} onChange={e => BodyFunc('iconShadowX', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影Y轴</div>
                        <InputNumber value={iconShadowY} onChange={e => BodyFunc('iconShadowY', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影尺寸</div>
                        <InputNumber value={iconShadowS} onChange={e => BodyFunc('iconShadowS', e)} />
                    </div>
                    <div className='Label'>
                        <div>阴影颜色</div>
                        <ColorPicker value={iconShadowB} onChangeComplete={e => BodyFunc('iconShadowB', e.toHexString())} />
                    </div>
                </div>
            </div>
        </div>
    );
};

export default SetSystemTABS;